<template>
  <div>
    <el-row class="infos" v-if="desc.images" type="flex" :gutter="10">
      <div class="img-box" v-for="item in desc.images">
        <div class="demo-image__preview">
          <el-image class="img" fit="contain" :src="item" :preview-src-list="desc.images"></el-image>
        </div>
      </div>
    </el-row>
  </div>
</template>

<script>

export default {
  components: {
  },
  data() {
    return {

    };
  },
  props: {
    desc: {
      type: Object,
      default: () => {
        return {
        };
      },
    },
  },
  watch: {

  },
  created() {

  },
  computed: {},
  async mounted() {
  },
  methods: {
  },
};
</script>


<style lang="less" scoped>
.infos {
  margin-top: 37px;
  flex-wrap: wrap;
}

.img-box {
  width: 188px;
  // height:237px;
  border: 1px solid rgba(230, 233, 240, 1);
  border-radius: 5px;
  text-align: center;
  margin-right: 20px;
  margin-bottom: 20px;

  .img {
    width: 148px;
    height: 206px;
    object-fit: cover;
    margin: 10px 0;
  }
}

@media (max-width: 750px) {
  .infos {
    margin: 10px 0 0 0;
  }

  .img-box {
    width: 100%;
  }
}
</style>
